{% extends 'blog/__base__.html' %}
{% block content %}

<h4>ajax XMLHttpRequest 上传文件进度条示例</h4>
<!-- <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> -->
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>    <!--CSRF-->

<progress id="upload_progress" value="0" max="100" style="width:600px;"></progress>
<input id="upfile" type="file" name="upfile" />
<button id="btn_start">Start</button>
<button id="btn_cancel">Cancel</button>

<script>
var upfileUrl = "/blog/api_upfile_save/"; //后端url;
var xhr = new XMLHttpRequest();
var progressBar = document.getElementById('upload_progress');

$('#btn_start').click(function() {
    var upFile = document.getElementById('upfile').files[0];
    var formData = new FormData();
    formData.append('upfile', upFile);
    //alert(formData.get("upfile").name); // 获得一传文件名
    // 使用jQuery发送
    $.ajax({
        headers:{"X-CSRFToken":$.cookie('csrftoken')},  //#CSRF
        url: upfileUrl, //后台API
        type: "POST",
        data: formData , //这里上传的数据使用了formData 对象
        processData: false, 
        contentType: false, //必须false才会自动加上正确的Content-Type
    　　 //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
    　  xhr: function() {
    　　　　var xhr = $.ajaxSettings.xhr();
    　　　　if (xhr.upload) {
    　　　　　　xhr.upload.onprogress = function(progress) {
                    if (progress.lengthComputable) {
                        console.log(progress.loaded / progress.total * 100);
                        progressBar.max = progress.total;
                        progressBar.value = progress.loaded;
                    }
                };
                xhr.upload.onloadstart = function() {
                    console.log('started...');
                };
     　　　 }
              return xhr;
     　 }
    }).done(function(resp) {
        alert(JSON.stringify(resp));
    }).fail(function(err) {
        alert(JSON.stringify(err))
    });
});
$('#btn_cancel').click(function() {
	alert(JSON.stringify('取消'));
	xhr.abort();
});
</script>

{% endblock %}
